<template>
    <div id="shop" style="width:100%">
        <body class="page">
        <el-header  class="header">
            <div class="header_title" style="width: 78vw;">店铺信息</div>
        </el-header>
        <div class="content">
            <div class="content_title">
                <div class="title_edit">
                    <el-button type="primary" @click="xiugai=true,updateQuery()" >编辑</el-button>
                </div>
            </div>
            <div style="display: flex">
                <div  class="information_img" >
                <div class="content_information">
                     <el-avatar v-if="this.img!=null"  :size="100"  :src="this.img"></el-avatar>
                    <img v-if="this.img==null" style="width: 100px;height: 100px;border-radius: 50%"  src="../../../public/image/zanwutouxiang.png"/>
                    </div>
                    <el-button v-if="this.img==null"  type="primary"  style="justify-content:center;margin-left: 10px" @click="tx=true" size="mini">补充图像</el-button>
                    <el-button v-if="this.img!=null"  type="primary"  style="justify-content:center;margin-left: 10px" @click="tx=true" size="mini">修改图像</el-button>
                    <div style="font-size: 14px" class="maturity">剩余天数：{{this.time}}</div>
                    <div class="page_service">
                        <span class="xf" @click="chongzhi=true">续费</span>
                        <span class="xf" @click="chongzhi=true">充值</span>
                    </div>
                </div>
                <div v-for="(item,index) in business" :key="index" class="demo-type">
                    <div class="user_information">
<!--                        <div class="name">{{item.clerk.clerkName}}</div>-->
<!--                        <div  v-for="item in user_list" :key='item.number' >-->
<!--                            <div class="img">-->
<!--                                <el-image :class="{'img': Number(item.number) === 1, 'imgs': Number(item.number) === 2}"  :src="item.path"></el-image>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <a class="renzheng" href="">去认证</a>-->
                    </div>
                    <div class="Store_Information">
                        <div class="Store">
                            <div class="left">门店ID：{{item.buId}}</div>
                            <div class="right">门店名称:{{item.buName}}</div>
                        </div>
                        <div class="Store">
                            <div class="left">店主名称：{{item.clerk.clerkName}}</div>
                            <div class="right">门店邮箱：{{item.buEmail}}</div>
                        </div>
                        <div class="Store">
                            <div class="left">门店电话：{{item.buPhone}}</div>
                            <div class="right">注册时间：{{item.buRegisterTime}}</div>
                        </div>
                        <div class="Store">
                            <div class="left">门店微信：{{item.buWeChat}}</div>
                            <div class="right">到期时间：{{item.buDueDate}}</div>
                        </div>
                        <div class="Store">
                            <div class="left">门店地址：{{item.buAddress}}</div>
                            <div class="right">店铺收益:{{parseFloat(item.buProfit).toFixed(2)}}￥</div>
                        </div>
                        <div class="Store">
                            <div class="left">门店简介：{{item.buIntroduce}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!--        登录日志-->
        <el-collapse  @change="queryJouranl()"  >
                <el-collapse-item style=" margin-top: 15px; " title="登录日志" name="1">
                    <div>
                        <el-table
                                :data="jouranl.records"
                                height="250"
                                style="width: 100%">
                            <el-table-column label="序号" width="60" align="center">
                                <template slot-scope="scope">
                                    {{scope.$index+1}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="clerk.clerkAccountNumber"
                                    label="登录账号"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="clerk.clerkName"
                                    label="登录者">
                            </el-table-column>
                            <el-table-column
                                    prop="role.roleName"
                                    label="登录者类型">
                            </el-table-column>
                            <el-table-column
                                    prop="loginSide"
                                    label="登录端">
                            </el-table-column>
                            <el-table-column
                                    prop="ip"
                                    label="ip地址">
                            </el-table-column>
                            <el-table-column
                                    prop="logintime"
                                    label="登陆时间">
                            </el-table-column>
                            <el-table-column label="操作" width="60" align="center">
                                <template slot-scope="scope">
                                    <el-button type="danger" @click="deleteShop(scope.row)" icon="el-icon-delete" circle></el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div style="text-align: center">
                        <el-pagination
                                @size-change="queryJouranl"
                                @current-change="queryJouranl"
                                :current-page.sync="page.journalPage.current"
                                :page-size.sync="page.journalPage.size"
                                :page-sizes="[4, 8]"
                                layout="total, prev, pager, next,sizes"
                                :total="this.jouranlDataTotal">
                        </el-pagination>
                    </div>
                </el-collapse-item>


        </el-collapse>


        </body>
<!--        欠费-->
        <el-dialog
                :visible.sync="dialogVisible"
                width="22%"
                title="欠费通知"
                :before-close="handleClose">
            <span style="width: 330px;display: block;margin-left: 40px;font-size: 16px;line-height: 25px;color: #666666;font-weight: bold">您好，您的店铺由于到期已恢复成免费版，为避免影响店铺的正常运营，请及时续费！咨询电话：1509-90199-776</span>

    <router-link to="/login"><el-button type="primary" style="margin-left: 70px;margin-top: 15px" >返回登路</el-button></router-link>
    <el-button type="primary" style="margin-left: 30px" @click="chongzhi=true" >马上升级</el-button>
        </el-dialog>
        <!--                充值-->
        <el-dialog

                title="充值"
                :visible.sync="chongzhi"
                width="50%"
                :before-close="handleClose">
            <div >
                <div class="hedar1">请选择购买信息</div>
                <div class="sesson1" style="margin-top: 30px;">
                    <div>
                        <div>购买方式: <el-radio v-model="radio" label="1">按年购买</el-radio><el-radio v-model="radio" label="2">按月购买</el-radio></div>
                        <div v-if="radio==1">
                            <div ><span>选择年限:</span><el-input style="width:100px;" v-model="nian" ></el-input><span>年</span>
                            </div>
                            <div ><span>费用总计:</span>${{this.nian*298}}<span>（按年购买¥298/店/年，按月购买¥50/店/月）</span></div>
                        </div>
                        <div v-if="radio==2">
                            <div ><span>选择月限:</span><el-input style="width:100px;" v-model="yue" ></el-input><span>月</span></div>
                            <div ><span>费用总计:</span>${{this.yue*50}}<span>（按年购买¥298/店/年，按月购买¥50/店/月）</span></div>
                        </div>

                    </div>
                </div>
                <div id="button">
                    <div>
                        <div>支付方式:</div>
                        <div style="margin-left: 100px">
                            <el-radio v-model="radio1" label="1"><img style="float: right;display: block;margin-top: -15px" src="../../../public/image/shop/wx.png"
                                                                      height="37" width="119"/></el-radio>
                            <el-radio style="margin-left: 150px" v-model="radio1" label="2"><img style="float: right;display: block;margin-top: -15px" src="../../../public/image/shop/zfb.png"
                                                                      height="38" width="98"/></el-radio>
                        </div>
                        <div style="margin-left:650px">实付金额:<span v-if="radio==1">${{this.nian*298}}</span><span v-if="radio==2">${{this.yue*50}}</span> <el-button type="danger" @click="zengjiaTime">确认支付</el-button></div>
                    </div>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
  </span>
        </el-dialog>
<!--        修改信息-->
            <el-dialog
                :visible.sync="xiugai"
                width="50%"
                title="修改信息"
                :before-close="handleClose">
            <div>
                <div class="hedar1">请选择购买信息</div>
                <div class="sesson1">
                    <div id="left">
                        <div> <span class="span">门店名称:</span><el-input class="inptu" v-model="business1[0].buName" ></el-input></div>
                        <div> <span class="span">门店电话:</span><el-input class="inptu" v-model="business1[0].buPhone" ></el-input></div>
                        <div><span class="span">门店地址:</span><el-input class="inptu" v-model="business1[0]. buAddress" ></el-input></div>
                    </div>
                    <div id="right">
                        <div><span class="span">门店微信:</span><el-input class="inptu" v-model="business1[0].buWeChat" ></el-input></div>
                        <div><span class="span">门店邮箱:</span><el-input class="inptu" v-model="business1[0].buEmail" ></el-input></div>

                        <div> <span class="span">门店简介:</span><el-input
                                type="textarea"
                                class="inptu"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="business1[0].buIntroduce">
                        </el-input></div>
                    </div>
                </div>

            </div>
           <el-button type="primary" style="margin-left: 300px;margin-top: 15px;width: 100px" @click="update1"  >保存</el-button>
            <el-button type="primary" style="margin-left: 100px;width: 100px" @click="xiugai=false" >取消</el-button>
        </el-dialog>
<!--        修改图像-->
        <el-dialog
                title="修改图像"
                :visible.sync="tx"
                width="15%"
                :before-close="handleClose">
            <div></div>
            <div class="block-tp">
                <div></div>
                        <el-image v-if="src!=null" style="width: 200px;height: 200px;border-radius: 15px"
                                  :src="src">
                        </el-image>
                    </div>
            <div><input type="file" id="imageFile" @change="imageToBase64($event)"/></div>
    <el-button style="margin-top: 20px" type="primary" @click="tx = false,myImange()">确 定</el-button>
            <el-button style="margin-left: 50px"  @click="tx = false">取 消</el-button>
        </el-dialog>

    </div>


</template>

<script>
  export default {
      name: "shop",

      data() {
          return {
              src:'',
              Business:{
                  buId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId,
                  buLicense:null,
                  imgBase64:null,


              },
              shop: {},
              user_list: [
                  {
                      path: require('/public/image/shop/v.png'),
                      number: 1
                  },
                  {
                      path: require('/public/image/shop/shenfenzheng.png'),
                      number: 2

                  }
              ],
              business: []
              ,
              time: null,
              dialogVisible: false,
              chongzhi: false,
              radio: '1',
              radio1: '1',
              nianzongjia: this.nian * 298,
              nian: '',
              yue: '',
              xiugai:false,

              zengjiaTimes: {
                  nian: "",
                  yue: "",
                  bid: JSON.parse(sessionStorage.getItem("bid")),
              },
              business1:[
                  {
                      buId:null,
                      buName:null,
                      buPhone:null,
                      buAddress:null,
                      buWeChat:null,
                      email:null,
                      buIntroduce:null,
                  }
              ],
              page:{
                  journalPage: {
                      current: 1,
                      size: 4
                  },
                  businessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
              },
              jouranl:{
                  logintime:null,
              },
              jouranlDataTotal:null,
              clerk:{
                  clerkId:JSON.parse(sessionStorage.getItem("clerk")).clerkId,
                  clerkBusinessId:JSON.parse(sessionStorage.getItem("clerk")).clerkBusinessId
              },
              tx:false,
              dialogImageUrl: '',
              imgDialogVisible: false,
              img:null,

          }
      },
      methods: {
          //将上传的图片转换为base64编码
          imageToBase64(){
              //图片上传
              let files = document.getElementById('imageFile').files[0];
              let fileName = document.getElementById('imageFile').files[0].name
              this.Business.buLicense = fileName
              var reader = new FileReader()
              reader.readAsDataURL(files)
              reader.onload = () => {
                  console.log('file 转 base64结果：' + reader.result)
                  this.Business.imgBase64 = reader.result
                  this.src=reader.result;
              }
              reader.onerror = function (error) {
                  console.log('Error: ', error)
              }
          },
          myImange(){
              if( this.Business.buLicense==null){
                  alert("请先上传头像")
                  return false;
              }else {
                  this.$axios.post("/administration/business/img-upload", this.Business).then(result => {
                      if (result.data > 0) {
                          this.businessQueryAll();
                          this.$message({
                              message: '修改成功!',
                              type: 'success'

                          })
                      }
                  })
              }
          },
          deleteShop(row){
              let corf=confirm("是否删除该条日志");
              if(corf){
                  this.$axios.post("/administration/journal/deleteShop",row.id).then(result => {
                     let c=result.data;
                     if(c.code==200){
                         this.$message({
                             message: '删除成功',
                             type: 'success'
                         });
                         this.queryJouranl()
                     }else {
                         alert(c.message)
                         this.queryJouranl()
                     }
                  })
              }

          },
          queryJouranl(){
              this.$axios.post("/administration/journal/queryJouranl",this.page).then(result => {
                  this.jouranl = result.data
                  this.jouranlDataTotal=result.data.total;
              })
          },


          updateQuery(){
              this.$axios.post("/administration/business/businessQueryAll1", this.clerk).then(result => {
                  this.business1 = result.data

              })
          },
          update1(){
              this.business1.buId = JSON.parse(sessionStorage.getItem("bid"));
              this.$axios.post("/administration/business/updateShangjia", this.business1[0]).then(result => {
                  let com= result.data
                  if (com.code == 200) {
                      alert(com.message)
                      this.xiugai=false;
                      this.businessQueryAll()
                  } else {
                      alert(com.message);
                  }
              })
          },
          zengjiaTime() {
              this.zengjiaTimes.nian = this.nian;
              this.zengjiaTimes.yue = this.yue
              this.$axios.post("/administration/business/zengjiaTime", this.zengjiaTimes).then(result => {
                  let com = result.data
                  if (com.code == 200) {
                      alert(com.message)
                      this.chongzhi = false;
                      this.dialogVisible = false;
                      this.businessQueryAll()
                  } else {
                      alert(com.message);
                  }


              })
          },
          businessQueryAll() {
              this.$axios.post("/administration/business/businessQueryAll", this.clerk).then(result => {
                  this.business = result.data
                  this.img=this.business[0].buLicense
                  this.src=this.business[0].buLicense
                  this.time=this.oldTime()
              })
          }
          , handleClose() {
              this.chongzhi = false;
              this.xiugai=false;
              this.tx=false;
          }
          ,
          oldTime() {
              let  START_DATE= this.dateToString(new Date());
              let END_DATE = this.business[0].buDueDate;
              if(START_DATE>=END_DATE){
                  this.dialogVisible=true;
                  return "已过期"
              }
              // let newTime1 = newTime.split('-')
              // let oldTime1 = oldTime.split('-');
              // if (newTime1[0] > oldTime1[0]) {
              //     alert("aaa")
              //     this.time = "已过期"
              //     this.dialogVisible = true;
              //     return null;
              // }
              //
              // if (newTime1[1] > oldTime1[1]) {
              //     alert("bbb")
              //     this.time = "已过期"
              //     this.dialogVisible = true;
              //     return null;
              // }
              // if (this.time == 0) {
              //     alert("ccc")
              //     this.dialogVisible = true;
              //     this.time = "已过期"
              // }
              //如果上传的日期是20200203这种格式那么需要转换成2020-02-03格式

              var sdate1 = Date.parse(START_DATE);
              var edate1 = Date.parse(END_DATE);
              //取两个数相差的绝对值
              var timeDiff = Math.abs(edate1 - sdate1);
              //计算相差天数
              var cdate = Math.ceil(timeDiff / (1000 * 3600 * 24));
              return cdate;

          },

      dateToString(date) {
          var year = date.getFullYear();
          var month = (date.getMonth() + 1).toString();
          var day = (date.getDate()).toString();
          if (month.length == 1) {
              month = "0" + month;
          }
          if (day.length == 1) {
              day = "0" + day;
          }
          var dateTime = year + "-" + month + "-" + day;
          return dateTime;
      },

      queryShop() {
          //查询店铺信息
          let bid = JSON.parse(sessionStorage.getItem("bid"));
          this.$axios.post("/administration/business/query-shop", bid).then(result => {
              this.business = result.data

          })

      },
  },
    // 在创建之前，添加body的style属性， 给花名册组件单独设置背景色
    mounted() {
        this.businessQueryAll()
      document.querySelector("body").setAttribute('style', "background-color: WhiteSmoke;")
    },
    // 在销毁前，将body的style属性删除
    beforeDestroy() {
      document.querySelector('body').removeAttribute('style')
    },
  }
</script>

<style scoped>
    .log{
        cursor: pointer;
    }
    .span{
        font-weight: bolder;
    }

    .inptu{
        width: 250px;
        margin-left: 15px;


    }
    #left>div{
        line-height: 80px;
    }
    #left{
        float: left;
        width: 400px;

        overflow: hidden;
    }
    #right{
        float: right;
        width: 400px;
        overflow: hidden;
        border: 1px solid #ffffff;
        line-height: 80px;
    }
    .header{
        box-shadow: inset 1px 1px 1px 1px #eeeeee;
        border-radius:15px;
        text-align: center;
        color: blue;
        margin-top: -50px;
    }
    .content{
        margin-top: 10px;
        width: 80vw;
        height: 380px;
        background-color:White;
        border-radius:15px;
        box-shadow: inset 1px 1px 1px 1px #eeeeee;
    }
    .xf{
        margin-left: 10px;
        cursor: pointer;
        color: red;
        font-size: 14px;
        font-weight: bold;
    }
    .hedar1{
        background-color: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 3px;
        overflow: hidden;
        height: 60px;
        line-height: 60px;
        box-shadow: inset 1px 1px 1px 1px #eeeeee;
        text-align: center;
    }
    .sesson1{
        background-color: #ffffff;

        border-radius: 3px;
        line-height: 60px;
        box-shadow: inset 1px 3px 3px 3px #eeeeee;
        text-align: left;
        padding-left: 50px;
        overflow: hidden;
        border: 1px solid #ffffff;
        margin-top: 20px;
        height: 300px;
    }
    #button{
        background-color: #ffffff;
        border: 1px solid #eeeeee;
        border-radius: 3px;
        line-height: 60px;
        box-shadow: inset 1px 1px 1px 1px #eeeeee;
        text-align: left;
        padding-left: 50px;
        margin-top: 30px;
    }
    #shop{
        padding: 15px;
        font-size: 14px;
        overflow-x: hidden !important;
    }
    .page{
        width: 80vw;
        height: 100%;
    }
    .header{
        width: 80vw;
        height: 5px;
        background-color: White;
        font-size: 25px;
        padding: 15px 0 10px 5px;
        margin-top: 1px;
    }

    .title_edit{
        display: flex;
        margin-left: 1450px;
        justify-content:space-between;
        padding-top: 25px;

    }
    .title_edit p{
        padding-left: 15px;
    }
    .title_edit a{
        flex-direction:row-reverse;
        color: cornflowerblue;
        text-decoration: none;
        font-size: 16px;
    }
    .information_img{
        padding-left: 16px;
        margin-left: 20px;
        justify-content:center;
    }
    .maturity{
        justify-content:center;
        margin: 10px 0 0 0px;
        font-size: 14px;
        color: red;
    }
    .demo-type{
        width: 65vw;
        padding: 15px 10px 0 50px ;
        justify-content: center;
        font-size: 16px;
        color: #666666;
        font-weight: bolder;

    }
    .page_service{
        margin-top: 15px;
    }
    .page_service a{
        margin: 15px 0 0 10px;
        font-size: 12px;
        color: cornflowerblue;
        text-decoration: none;
    }
    .user_information{
        width: 60vw;
        display: flex;
    }
    .name{
        justify-content: flex-start;
    }
    .img{
        width: 25px;
        height: 25px;
        margin-left: 10px;
    }
    .imgs{
        text-align: center;
        width: 25px;
        height: 25px;
        padding:0 5px -5px 10px;
    }
    .renzheng{
        margin-left: 15px;
        color: cornflowerblue;
    }
    .Store_Information{
        width: 70vw;
        margin-left: 70px;
    }
    .SMS{
        font-size: 15px;
        padding-top: 15px;
    }
    .Store{
        width: 60vw;
        padding-top:15px;
        overflow: hidden;

    }
    .left {
        width: 500px;
        float: left;

    }
    .right{

        width: 400px;
        float: left;


    }
    .log_title{
        width: 78vw;
        background-color: White;
        font-size: 15px;
        padding: 15px 0 10px 15px;
        margin-top: 10px;
        border-radius:10px;
        display: flex;
        justify-content:space-between;
    }
    .shop_title{
        width: 78vw;
        background-color: White;
        font-size: 15px;
        padding: 15px 0 10px 15px;
        margin-top: 10px;
        border-radius:10px;
        display: flex;
        justify-content:space-between;
    }
    .log_img{
        width: 15px ;
        height: 15px;
        padding-right: 2vw;
    }
    .shop_img{
        width: 15px ;
        height: 15px;
        padding-right: 2vw;
    }


</style>
